
html {

}
body {
    font-family: "Microsoft YaHei","微软雅黑";
    box-sizing: border-box;
    overflow: hidden;
}

.wrap {
    overflow-y: scroll;
    padding:50px 30px;
}
.page-content {
    max-width: 1650px;
    margin:0 auto;

}

.p-left{
    display: inline-block;
    vertical-align: top;
    width:30%;
    margin-left:20px;


}

.p-right {
    display: inline-block;
    vertical-align: top;

    width: calc(70% - 80px) ;
    margin-left:50px;
}


.section {
    margin:20px 0;
    position: relative;
}

.p-left .icon {
    position: absolute;
    top:2px;
    left: -30px;
}

.section  .header {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    color:#32CDFF;
}
.section .content {
    margin:15px 0;
    font-size: 14px;
}

.preview {

}
.preview .age {

}
.preview .age .title {
    display: inline-block;
    vertical-align: middle;
}
.preview .age .num {
    color:#32CDFF;
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
    margin-left:10px;
}


.preview .material .title {
    display: inline-block;
    vertical-align: middle;
}
/*.preview .material .material-list {*/
    /*color:#8A8F9B;*/
    /*font-size: 14px;*/
    /*display: block;*/
    /*vertical-align: top;*/

    /*width: calc( 100% );*/
    /*overflow: hidden;*/
    /*margin:20px 0 0 30px;*/
/*}*/

/*.preview .material .material-list  .item{*/
    /*width:50%;*/
    /*float:left;*/
    /*margin-bottom: 15px;*/
/*}*/


.preview .material .material-list {
    list-style: none;
    color:#8A8F9B;
    padding: 0 !important;
    overflow: hidden;
    margin-left:20px;
    font-size:14px;
}

.preview .material .material-list  li {
    position: relative;
    line-height: 30px;
    margin: 0 0  15px 20px;!important;
    width: calc(50% - 25px);
   float:left;
}


.preview .material .material-list  li:nth-child(1) {

    width: calc(100% - 25px);
}

.preview .material .material-list   li span {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 3px;
    height: 3px;
    background-color: #8A8F9B;
    border-radius: 50%;
    position: absolute;
    top:12px;
    left:-8px;
}

.preview .brief {
    margin-bottom:15px;
}

.preview .brief p{
    color:#8A8F9B;
}


.intro-img {
    width:100%;
    margin-bottom: 15px;
}

.objects {

}
.object-item {
    margin:25px 0 0 0;
}

.object-item .title {
    font-size: 14px;
     color:#696D76;
}
.object-item .content p{
    font-size: 14px;
    color:#8A8F9B;
}

.object-item .content span{
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 50px;
    color:#8A8F9B;
}


.scenario-list {
    list-style: none;
    color:#8A8F9B;
    padding: 5px 10px !important;
}

.scenario-list li {
    position: relative;
    line-height: 30px;
    margin-bottom:15px!important;


}
.scenario-list  li:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 3px;
    height: 3px;
    background-color: #8A8F9B;
    border-radius: 50%;
    position: absolute;
    top:12px;
    left:-8px;
}


.p-right .icon {
    display: inline-block;
    vertical-align: middle;
}

.unit-list {
    width:100%;
    font-size: 0;
    background-color: #F8F9FA;
    margin: 20px 0;

    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;

    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    position: relative;
    height:40px;
}

.u-nav-cursor {
    position: absolute;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;

    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;

    top:0;left:0;
    width:16.666%;
    height:40px;
    box-sizing: border-box;
    background-color: #32CDFF ;
    z-index:1;
}


.unit-list span {
    display: inline-block;
    height:40px;
    line-height: 40px;
    color:#4B4F57;
    width:16.6666%;
    font-size: 14px;
    text-align: center;
    position: relative;
    z-index: 2;

    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;

    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;

    cursor:pointer;
}
.unit-list .select {
    color:white;

}



.unit {
    display: none;
}
 .active-unit {
     display: block!important;
 }

 .object {
     margin:20px 0;
 }
.object .title {
    font-size: 16px;
    color:#000027;
    /*display: inline-block;*/
    /*vertical-align: top;*/
    /*width:95px;*/
    /*margin-top:2px;*/
}

.object .item {
    font-size: 14px;
    color: #676C75;
    line-height: 26px;
    /*display: inline-block;*/
    /*vertical-align: top;*/
    /*width: calc(100% - 100px);*/

}

.unit-content{
    margin:20px 0;
    font-size: 14px;
    color:#676C75;
    width:100%;
    /*border-top: 1px solid rgba(50,205,255,0.19);*/
    /*display: none;*/

    border:1px solid rgba(50,205,255,0.19);
    border-collapse: collapse;
    table-layout:fixed;

    /*min-width:800px;*/
}



.unit-content tr {
    width:100%;

}

.unit-content tr:nth-child(even) {
    background: rgba(50,205,255,0.1);
}

.unit-content th {

    width:100%;
    border:1px solid rgba(50,205,255,0.10);
}


.unit-content td {
    border:1px solid rgba(50,205,255,0.10);
    width:100px;
}

.unit-content .short {
    width:12%;
    min-width:80px!important;
    padding:16px 10px 16px 10px;
    text-align: center;

}

.unit-content .long {
    width: 30%!important;
    padding:16px 24px 16px 24px;
    /*display: inline-block;*/
    /*vertical-align: middle;*/
    /*margin-left: -6px;*/


}
.unit-content .long span {
    word-break:normal;
    word-wrap:break-word;
}


.unit-content .long .item {
    word-wrap:break-word;
    display: block;
    padding:2px 0 ;
}

.age-icon {
    background-size: 20px 20px;
    background-image: url('../../icon/levelIntro/age.png');
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin: -2px 5px 0 5px;
}


.material-icon {
    background-size: 20px 20px;
    background-image: url('../../icon/levelIntro/material.png');
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin: -2px 5px 0 5px;
}

.menu-icon {
    background-size: 24px 24px;
    background-image: url('../../icon/levelIntro/menu.png');
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;

}

.goal-icon {
    background-size: 24px 24px;
    background-image: url('../../icon/levelIntro/goal.png');
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;

}

.flag-icon {
    background-size: 24px 24px;
    background-image: url('../../icon/levelIntro/flag.png');
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
}



::-webkit-scrollbar {
    height: 8px;
    width: 8px;
    background: rgba(0,0,0,0.1);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    border-radius: 5px;
}

::-webkit-scrollbar-button {
    display: none;
}
::-webkit-scrollbar-thumb {
    width: 8px;
    min-height: 15px;
    background: rgba(0,0,0,.1);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    border-radius: 5px;
}
::-webkit-scrollbar-track {
    background-color: #fff;
}
::-webkit-scrollbar-track-piece {
    background: #fff;
}